<template>
	<div class="mkScanInput" :style="{ 'width': width }">
		<el-input v-model.trim="model" :placeholder="placeholder" autocomplete="off" class="text">
			<template #prefix>
				<i class="fa fa-barcode"></i>
			</template>
		</el-input>
		<el-input v-model.trim="model" type="password" class="pass" autocomplete="new-password" ref="passRef"
			@keyup.enter="onKeyUpEnter" @input="handleInput">
			<template #prefix>
				<i class="fa fa-barcode"></i>
			</template>
		</el-input>

	</div>

</template>

<script lang='ts' setup>
// 扫码框组件
// 用法: 使用时不要绑定mmodel,仅通过onEnter获取扫码(回车)结果
// <MkScanInput placeholder="请扫描标本条码" @onEnter="getBarcode" /> 
defineOptions({
	name: 'MkScanInput'
})

const props = defineProps({
	placeholder: {
		type: String,
		default: ''
	},
	width: {
		type: String,
		default: '290px'
	}
})
const emits = defineEmits(['onEnter'])

const passRef = ref<HTMLElement | null>()
const model = ref<string>()
/**
 * 扫码处理
 */
const onKeyUpEnter = () => {
	emits('onEnter', model.value?.trim());
	select()
}
const clear = () => {
	model.value = '';
}
const select = () => {
	(passRef.value as any)?.select()
}

const focus = () => {
	(passRef.value as any)?.focus()
	clear()
}

/**
 * 处理输入事件，动态去掉输入内容中的空格
 */
const handleInput = (value: string) => {
	model.value = value.replace(/\s/g, '');
}

defineExpose({ select, focus, clear })
</script>

<style lang='scss' scoped>
.mkScanInput {
	position: relative;
	height: 39px;
	line-height: 39px;

	.text {
		position: absolute;
		font-size: 1.6rem;
		width: 100%;
		height: 100%;
		ime-mode: disabled;
		color: red;
		font-family: Consolas, Monaco, monospace;
	}

	.pass {
		position: absolute;
		z-index: 2;
		font-size: 1.6rem;
		/* 等宽字体 */
		font-family: 'Consolas', Courier, monospace;
		width: 100%;
		height: 100%;
		border: none;
		ime-mode: disabled;
		background-color: transparent;
		color: transparent;
		caret-color: red;
		font-family: Consolas, Monaco, monospace;
		text-transform: uppercase;

		:deep(.el-input__wrapper) {
			background-color: transparent;
			color: transparent;
		}

		:deep(.el-input__inner) {
			color: transparent;

		}

		::selection {
			background: rgba(46, 141, 255, 0.8);
			color: transparent;
		}

		::-moz-selection {
			background: rgba(46, 141, 255, 0.8);
			color: transparent;
		}

		::-webkit-selection {
			background: rgba(46, 141, 255, 0.8);
			color: transparent;
		}
	}

	.iconfont {
		font-size: 1.4rem;
	}
}
</style>